<template>
    <div class="app-container">

        <el-form class="form-box" ref="formRef" :model="form" label-width="auto" size="large">
            <el-row :gutter="20">
                <el-col :span="21">
                    <el-form-item label="发放用户手机号：" prop="mobile">
                        <el-input v-model="form.mobile" placeholder="请输入发放用户手机号" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-button class="search-btn" @click="handleSearch">检测</el-button>
                </el-col>
                <div class="info-div">
                    <span class="canuse">姓名：{{ vip.memberCode ? vip.name : '--' }}</span>
                    <span class="canuse">可用券：{{ vip.memberCode ? vip.cardList[currentCardIndex].ticketCount : '--' }}</span>
                </div>
                <el-col :span="24">
                    <el-form-item label="会员卡选择：" prop="payCode">
                        <el-select v-model="form.cardNo" @change="changeCardNo">
                            <el-option v-for="item in card_options" :key="item.cardNo" :value="item.cardNo"
                                :label="`${item.cardName}：No.${item.cardNo}`" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <div class="info-div">
                    <span class="canuse">本金：<span class="color-FF3333">{{ vip.memberCode ?
                        vip.cardList[currentCardIndex].currentAmt : '--' }}</span></span>
                    <span class="canuse">金币：<span class="color-FF3333">{{ vip.memberCode ?
                        vip.cardList[currentCardIndex].currentCoins : '--' }}</span></span>
                    <span class="canuse">积分：<span class="color-FF3333">{{ vip.memberCode ?
                        vip.cardList[currentCardIndex].currentPoint : '--' }}</span></span>
                </div>

                <el-col :span="24">
                    <el-form-item label=" " prop="payAmt">
                        <div class="action">
                            <div class="action-item" v-for="(v, k) in tabBtnList" :key="k" @click="handleAction(v, k)"
                                :class="{ active: form.type == v.value, none: v.value == '', disabled: v.isCanUse == '0' }">
                                {{ v.name }}
                            </div>
                        </div>
                    </el-form-item>
                </el-col>

                <el-col :span="9">
                    <el-form-item label="数量：" prop="presentCoins">
                        <el-input-number class="input-number-temp" v-model="form.presentCoins" :min="0" :precision="0"
                            clearable style="width: 100%;" />
                    </el-form-item>
                </el-col>


                <el-col :span="24">
                    <el-form-item label="备注：" prop="reason">
                        <el-input v-model="form.reason" placeholder="请输入发放备注" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div class="footer-box">
            <el-button class="cancel" @click="handleCancel">取消</el-button>
            <el-button class="submit" @click="handleSubmit">确认</el-button>
        </div>
    </div>
</template>

<script setup>

import Api from '@/api'

// 表单rules
const rules = reactive({
    mobile: [
        { required: true, message: '请输入手机号', trigger: 'change' },
    ],
})

let vip = ref({})
let card_options = ref([])
let currentCardIndex = ref(0)
const handleSearch = async () => {
    if (!form.value.mobile) return
    // console.log(mobile.value)
    await Api.Common.PcObjProcess.Do({ "functionName": "GetMemberInfo", "orgCode": "0004", "contentData": { "mobile": form.value.mobile } })
        .then(res => {
            console.log('搜索会员res :>> ', res);
            if (res.result == '') return ElNotification({
                title: '提示',
                message: '没有搜索到会员',
                type: 'warning',
            })
            vip.value = res
            card_options.value = res.cardList
            form.value.cardNo = res.cardList[0].cardNo
        })
}

// 改变会员卡选择
const changeCardNo = (v) => {
    // console.log('v :>> ', v);
    card_options.value.forEach((item, index) => {
        if (item.cardNo == v) {
            currentCardIndex.value = index
        }
    });
}



// -------------------------操作按钮-----------------------------
const tabBtnList = ref([
    { name: '增加', value: '1', isCanUse: '1' },
    { name: '减少', value: '2', isCanUse: '1' },
])
// 切换赠金币/券
const handleAction = (v, k) => {
    if (v.isCanUse == '0') return
    form.value.type = v.value
}

const form = ref({ type: '1' })

// 取消
const emit = defineEmits(['emitCancel', 'emitSubmit'])
const handleCancel = (params) => {
    emit('emitCancel', 'cancel')
}
// 确认
const formRef = ref()
const coinFlag = ref(false)
const handleSubmit = (params) => {
    formRef.value.validate(valid => { //表单验证
        if (valid) {
            let data = {
                no: form.value.cardNo,
                type: form.value.type,
                presentCoins: form.value.presentCoins,
                reason: form.value.reason,
                opType:'2'
            }
            if(coinFlag.value){
                ElNotification({
                    title: '提示',
                    message: '加载中,请稍等',
                    type: 'success',
                })
                return
            }
            coinFlag.value = true
            console.log('data :>> ', data);
            // return
            Api.Common.PcObjProcess.Do({ "functionName": "ChangeMemberAmt", "orgCode": "0004", "contentData": { ...data, } })
            .then(res => {
                console.log('金币充值res :>> ', res);
                ElNotification({
                    title: '提示',
                    message: '操作成功',
                    type: 'success',
                })
                coinFlag.value = false
                emit('emitSubmit',)
            })
            .catch(err=>{
                coinFlag.value = false
            })
        }
    })
}

</script>

<style scoped lang="scss">
.form-box {
    margin-top: 20px;
    padding: 0 40px;

    .search-btn {
        float: right;
        width: 80px;
        background: #FFE566;
        border-radius: 8px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        border: 0;
    }

    .info-div {
        margin-bottom: 20px;
        padding-left: 150px;

        .canuse {
            margin-right: 50px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
        }
    }


    ::v-deep {
        .el-radio__inner {
            // margin-left: 20px;
            width: 20px;
            height: 20px;
        }

        .el-radio__input.is-checked .el-radio__inner {
            border-color: #ff6a00;
            /* 选中状态边框颜色 */
            background-color: #ffffff;
            /* 选中状态背景颜色 */
        }

        .el-radio__inner:after {
            background-color: #ff6a00;
            width: 8px;
            height: 8px;
        }

        .el-radio__label {
            color: #212121 !important;
        }
    }

    .input-number-temp {
        border: 1px solid #ffffff;
    }

}

.footer-box {
    margin-top: 20px;
    display: flex;
    justify-content: center;

    .cancel {
        width: 160px;
        height: 60px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #FF6A00;
        font-size: 24px;
        color: #FF6A00;
    }

    .submit {
        width: 160px;
        height: 60px;
        background: #FF6A00;
        border-radius: 8px;
        font-size: 24px;
        color: #FFFFFF;
        margin-left: 30px;
    }
}

.action {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    // justify-content: space-between;
    // padding: 10px 0px 0px;
    // margin-bottom: 30px;

    .action-item {
        // width: 208px;
        // flex: calc(25% - 16px);
        /* 计算每个子元素的宽度，减去 margin */
        height: 42px;
        line-height: 42px;
        width: 100px;
        text-align: center;
        background: #E6E6E6;
        border-radius: 8px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #666666;
        margin-right: 20px;
        cursor: pointer;

        &.active {
            background: #FFE566;
            color: #212121;
        }

        &.disabled {
            background: #F2F2F2;
            border-radius: 8px;
            color: #CCCCCC;
        }

        &.none {
            background: #FFFFFF;
        }
    }
}

.color-FF3333 {
    color: #FF3333
}

.line-height-40 {
    line-height: 40px;
}
</style>
